<template>
    <!--历史数据-->
    <div class="earlywarning_historical_data">
        <div>
            <el-tabs
                v-model="activeName"
                tab-position="left"
                style="height: 100%"
                class="demo-tabs"
                @tab-click="handleClick"
            >
                <el-tab-pane label="罐内属性" name="first"></el-tab-pane>
                <el-tab-pane label="气体检测" name="second"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="">
            <component :is="componentItem"></component>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, markRaw } from 'vue';
import type { Component } from 'vue';
import { EchartsMethods } from '@/chart/index';
import ChartView from '@/chart/index.vue';
import propertiesitem from './properties.vue';
import gasdetection from './Gasdetection.vue';

const componentItem = ref<Component>(propertiesitem);

const activeName = ref('first');

const handleClick = (tab, event) => {
    console.log(tab, event);
    const obj = {
        first: propertiesitem,
        second: gasdetection
    };
    componentItem.value = markRaw(obj[tab.paneName]);
};
</script>

<style scoped lang="scss">
.earlywarning_historical_data {
    display: flex;
    > div {
        &:nth-of-type(1) {
            width: 30%;
            padding-left: 100px;
        }
        &:nth-of-type(2) {
            width: 70%;
        }
    }
    ::v-deep(.el-tabs__header),
    ::v-deep(.el-tabs__nav-wrap) {
        height: 100%;
    }
    ::v-deep(.el-tabs__item) {
        font-size: 14px !important;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        padding: 0 22px;
    }

    ::v-deep(.el-tabs__item.is-active) {
        background: url('@/assets/image/tabclickback.png') no-repeat;
        color: #ffffff !important;
        background-size: 100% 100%;
    }

    ::v-deep(.el-tabs__nav-wrap)::after {
        background-color: rgba(27, 147, 251, 0.29);
    }

    .intank_properties {
        margin-top: 34px;
        padding-bottom: 20px;
    }
}
</style>
